import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface LayoutState {
  // Theme
  theme: string;
  mode: 'light' | 'dark';
  
  // Sidebar
  sidebarOpen: boolean;
  sidebarType: 'module' | 'classic' | 'popover';
  sidebarCollapsed: boolean;
  
  // Layout
  layout: 'vertical' | 'horizontal' | 'semi-box';
  navbarType: 'sticky' | 'floating' | 'static';
  footerType: 'sticky' | 'static' | 'hidden';
  
  // Language
  language: string;
  
  // Actions
  setTheme: (theme: string) => void;
  setMode: (mode: 'light' | 'dark') => void;
  toggleMode: () => void;
  setSidebarOpen: (open: boolean) => void;
  toggleSidebar: () => void;
  setSidebarType: (type: 'module' | 'classic' | 'popover') => void;
  setSidebarCollapsed: (collapsed: boolean) => void;
  toggleSidebarCollapsed: () => void;
  setLayout: (layout: 'vertical' | 'horizontal' | 'semi-box') => void;
  setNavbarType: (type: 'sticky' | 'floating' | 'static') => void;
  setFooterType: (type: 'sticky' | 'static' | 'hidden') => void;
  setLanguage: (language: string) => void;
}

export const useLayoutStore = create<LayoutState>()(
  persist(
    (set) => ({
      // Initial state
      theme: 'violet',
      mode: 'light',
      sidebarOpen: false,
      sidebarType: 'module',
      sidebarCollapsed: false,
      layout: 'vertical',
      navbarType: 'sticky',
      footerType: 'static',
      language: 'en',
      
      // Actions
      setTheme: (theme) => set({ theme }),
      setMode: (mode) => set({ mode }),
      toggleMode: () => set((state) => ({ mode: state.mode === 'light' ? 'dark' : 'light' })),
      setSidebarOpen: (sidebarOpen) => set({ sidebarOpen }),
      toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
      setSidebarType: (sidebarType) => set({ sidebarType }),
      setSidebarCollapsed: (sidebarCollapsed) => set({ sidebarCollapsed }),
      toggleSidebarCollapsed: () => set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
      setLayout: (layout) => set({ layout }),
      setNavbarType: (navbarType) => set({ navbarType }),
      setFooterType: (footerType) => set({ footerType }),
      setLanguage: (language) => set({ language }),
    }),
    {
      name: 'layout-store',
    }
  )
);

// User state
interface UserState {
  user: {
    id: string;
    name: string;
    email: string;
    avatar?: string;
    role: string;
  } | null;
  
  setUser: (user: UserState['user']) => void;
  clearUser: () => void;
}

export const useUserStore = create<UserState>()(
  persist(
    (set) => ({
      user: null,
      
      setUser: (user) => set({ user }),
      clearUser: () => set({ user: null }),
    }),
    {
      name: 'user-store',
    }
  )
); 